<template>
  <div class="threeBox">
    <div class="seatsBox">
      <span class="empty" v-if="!isShowSeatsTag" @click="onClickSeats">
        <svg-icon
            :name="'icon-addIcon'"
        ></svg-icon>
        添加座席标签
      </span>
      <div class="tagTitle">
        <div class="title">
          <span class="line"></span>
          <span class="name_t">座席标签</span>
        </div>
      </div>
      <div class="tagBox">
        <div style="margin-top: 8px; padding: 0 8px;position: relative" v-show="isShowSeatsTag">
          <t-button class="saveTag" v-show="saveSeatsTag" @click="handleSaveSeatsTag">保存</t-button>
          <t-dropdown trigger="click" :minColumnWidth="304" :options="seatsTagOptions" @click="clickSeatsHandler">
            <t-input
                style="height: 28px;"
                class="c_input__drp"
                v-model="newSeatsTagValue"
                :maxlength="10"
                :suffix="suffix"
                @keyup="onSeatsEnter"
                placeholder="请点击选择/手动输入座席侧标签"
            />
          </t-dropdown>
        </div>
        <div class="tags">
          <span class="tag s_tag" v-for="item in tagState.seatsTags" :key="item.tagId">
            <span>{{ item.tagName }}</span>
            <svg-icon
                @click="handleDeleteTag('seats', item)"
                :name="'icon-delIcon'"
            ></svg-icon>
          </span>
        </div>
      </div>
    </div>
    <div class="customBox">
      <span class="empty" v-if="!isShowCustomTag" @click="onClickCustom">
        <svg-icon
            :name="'icon-addIcon'"
        ></svg-icon>
        添加客户标签
      </span>
      <div class="tagTitle">
        <div class="title">
          <span class="line"></span>
          <span class="name_t">客户标签</span>
        </div>
      </div>
      <div class="tagBox">
        <div style="margin-top: 8px; padding: 0 8px;position: relative" v-show="isShowCustomTag">
          <t-button class="saveTag" v-show="saveCustomTag" @click="handleSaveCustomTag">保存</t-button>
          <t-dropdown trigger="click" :minColumnWidth="304" :options="customTagOptions" @click="clickCustomHandler">
            <t-input
                style="height: 28px;"
                class="c_input__drp"
                v-model="newCustomTagValue"
                :maxlength="10"
                :suffix="suffix1"
                @keyup="onCustomEnter"
                placeholder="请点击选择/手动输入客户侧标签"
            />
          </t-dropdown>
        </div>
        <div class="tags">
          <span class="tag c_tag" v-for="item in tagState.customTags" :key="item.tagId">
            <span>{{ item.tagName }}</span>
            <svg-icon
                @click="handleDeleteTag('custom', item)"
                :name="'icon-delIcon'"
            ></svg-icon>
          </span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import {ref, computed, inject, onMounted, reactive, watch, toRaw, watchEffect} from 'vue'
import {Message, MessagePlugin} from "tdesign-vue-next";
import cache from '@/utils/cache.js'
import {newTag, tagList} from "../../../../api/qualityResult";
import { usePageStore } from '@/pinia/page.js'
const store = usePageStore()

const seatsTagOptions = ref([])
const customTagOptions = ref([])
onMounted(() => {
  // 获取客户侧标签list
  getSeatsTagList()
  // 获取座席侧标签list
  getCustomTagList()
})
const getSeatsTagList = () => {
  let projectId = JSON.parse(cache.getLocalstorage('authInfo'))['agencyId']
  tagList(projectId, 0).then(res => {
    seatsTagOptions.value = res.data.map(item => {
      return {
        content: item.tagName,
        value: item.id
      }
    })
  })
}
const getCustomTagList = () => {
  let projectId = JSON.parse(cache.getLocalstorage('authInfo'))['agencyId']
  tagList(projectId, 1).then(res => {
    customTagOptions.value = res.data.map(item => {
      return {
        content: item.tagName,
        value: item.id
      }
    })
  })
}
const setTagsValue = (ary) => {
  store.setItemTagsData(ary)
}
const tagState = reactive({
  seatsTags: [],
  customTags: []
})
const tagInfo  = inject('tagInfo') // 标签信息
const infoIds  = inject('infoIds')

if(tagInfo.value) {
  tagState.seatsTags = toRaw(tagInfo.value).filter(item => item['useType'] === 0)
  tagState.customTags = toRaw(tagInfo.value).filter(item => item['useType'] === 1)
}
setTagsValue(tagState)
const isShowSeatsTag = ref(false) // 是否显示座席输入框
isShowSeatsTag.value = tagState.seatsTags.length > 0;
// 添加座席侧标签
const onClickSeats = () => {
  if(store.templateStatus === 1) {
    MessagePlugin.error('引用模板已删除，不可添加')
    return
  }
  isShowSeatsTag.value = true
}
// 选中座席下拉框
const clickSeatsHandler = (data) => {
  // 判断标签是否存在
  const isExit = tagState.seatsTags.some(item => {
    return item.tagName === data.content
  })
  if(isExit) return MessagePlugin.error('该标签已存在')
  let obj = {
    tagId: data.value,
    tagName: data.content,
    useType: 0,
    ...toRaw(infoIds.value)
  }
  tagState.seatsTags.push(obj)
  setTagsValue(tagState)
}
// 座席输入框输入
const newSeatsTagValue = ref('')
const suffix = computed(() => {
  return `${newSeatsTagValue.value.length}/10`;
});

const saveSeatsTag = ref(false) // 是否显示保存按钮
const onSeatsEnter = (val) => {
  console.log(val)
  if(val === '' || val === undefined || val === null) {
    saveSeatsTag.value = false
  } else {
    // 判断输入的值是否在下拉列表中
    const isExist = seatsTagOptions.value.some(item => {
      return item['content'] === val
    })
    saveSeatsTag.value = !isExist;
  }
}
// 保存座席侧标签
const handleSaveSeatsTag = () => {
  saveInputTag('seats',newSeatsTagValue.value ,0)
}

const isShowCustomTag = ref(false) // 是否显示客户输入框
isShowCustomTag.value = tagState.customTags.length > 0;
// 添加座席侧标签
const onClickCustom = () => {
  if(store.templateStatus === 1) {
    MessagePlugin.error('引用模板已删除，不可添加')
    return
  }
  isShowCustomTag.value = true
}
// 选中客户侧下拉框
const clickCustomHandler = (data) => {
  // 判断标签是否存在
  const isExit = tagState.customTags.some(item => {
    return item.tagName === data.content
  })
  if(isExit) return MessagePlugin.error('该标签已存在')
  let obj = {
    tagId: data.value,
    tagName: data.content,
    useType: 1,
    ...toRaw(infoIds.value)
  }
  tagState.customTags.push(obj)
  setTagsValue(tagState)
};
const newCustomTagValue = ref('')
const suffix1 = computed(() => {
  return `${newCustomTagValue.value.length}/10`;
});
const saveCustomTag = ref(false) // 是否显示保存按钮
const onCustomEnter = (val) => {
  if(val === '' || val === undefined || val === null) {
    saveCustomTag.value = false
  } else {
    // 判断输入的值是否在下拉列表中
    const isExist = toRaw(customTagOptions.value).some(item => {
      return item['content'] === val
    })
    saveCustomTag.value = !isExist;
  }
}
// 保存客户侧标签
const handleSaveCustomTag = () => {
  saveInputTag('custom',newCustomTagValue.value ,1)
}

// 保存输入的标签
const saveInputTag = (aside,tagName, type) => {
  let data = {
    projectId: JSON.parse(cache.getLocalstorage('authInfo'))['agencyId'],
    tagName,
    type
  }
  newTag(data).then(res => {
    console.log(res)
    if(res.code === 0) {
      let obj = {
        tagId: res.data.id,
        tagName: res.data.tagName,
        useType: res.data.type,
        ...toRaw(infoIds.value)
      }
      if(aside === 'custom') {
        tagState.customTags.push(obj)
        newCustomTagValue.value = ''
        saveCustomTag.value = false
        getCustomTagList()
        setTagsValue(tagState)
      } else {
        tagState.seatsTags.push(obj)
        newSeatsTagValue.value = ''
        saveSeatsTag.value = false
        getSeatsTagList()
        setTagsValue(tagState)
      }
    }
  })
}

// 删除tag
const handleDeleteTag = (type, obj) => {
  if(type === 'seats') { // 删除座席tag
    tagState.seatsTags = tagState.seatsTags.filter(item => item.tagId !== obj.tagId)
    setTagsValue(tagState)
  } else { // 删除客户侧tag
    tagState.customTags = tagState.customTags.filter(item => item.tagId !== obj.tagId)
    setTagsValue(tagState)
  }
}
</script>

<style lang="scss" scoped>
.threeBox {
  height: calc(100vh - 410px);
  margin-top: 10px;
  .seatsBox {
    height: 50%;
    //background-color: red;
    position: relative;
    .empty {
      cursor: pointer;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 112px;
      height: 24px;
      opacity: 1;
      border-radius: 245px;
      background: rgba(236, 242, 254, 1);
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 1px 13px 1px 13px;

      font-size: 11px;
      font-weight: 600;
      color: rgba(30, 117, 254, 1);
      .svg-icon {
        height: 10px;
        width: 10px;
        margin-right: 4px;
      }
    }
  }
  .customBox {
    height: 50%;
    //background-color: pink;
    position: relative;
    .empty {
      cursor: pointer;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 112px;
      height: 24px;
      opacity: 1;
      border-radius: 245px;
      background: rgba(255, 246, 230, 1);
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 1px 13px 1px 13px;

      font-size: 11px;
      font-weight: 600;
      color: rgba(255, 153, 0, 1);
      .svg-icon {
        height: 10px;
        width: 10px;
        margin-right: 4px;
      }
    }
  }
  .tagTitle {
    .title {
      height: 21px;
      width: 100%;
      border-radius: 2px;
      background: rgba(250, 250, 250, 1);
      display: flex;
      align-items: center;

      .line {
        display: inline-block;
        margin: 0 9px 0 8px;
        width: 2px;
        height: 11px;
        opacity: 1;
        border-radius: 249px;
        transform: rotate(181.81deg);
        background: rgba(30, 117, 254, 1);
      }

      .name_t {
        display: inline-block;
        font-size: 11px;
        font-weight: 600;
        color: rgba(56, 56, 56, 1);
        margin-right: 8px;
      }

      .num_t {
        font-size: 11px;
        font-weight: 400;
        color: rgba(56, 56, 56, 1);
      }
    }
  }
  .tagBox {
    .saveTag {
      position: absolute;
      z-index: 200;
      height: 18px;
      width: 36px;
      top: 5px;
      right: 49px;
      background-color: rgba(30, 117, 254, 1);
      :deep(.t-button__text) {
        font-size: 11px;
        font-weight: 400;
        color: rgba(255, 255, 255, 1);
      }
    }
    .c_input__drp {
      height: 28px;
      :deep(.t-input) {
        height: 28px;
      }
      :deep(.t-input--suffix) {
        height: 28px;
        font-size: 12px;
        font-weight: 400;
        color: rgba(12, 13, 14, 1);
      }
    }
    .tags {
      margin-top: 7px;
      padding: 0 3px;
      .tag {
        margin: 0 4px 4px 4px;
        border-radius: 11px;
        height: 22px;
        line-height: 22px;
        display: inline-block;
        padding: 0 8px;
        font-size: 11px;
        font-weight: 400;
        letter-spacing: 0;

        .svg-icon {
          height: 10px;
          width: 10px;
          cursor: pointer;
        }
      }
      .s_tag {
        background: rgba(235, 242, 255, 1);
        color: rgba(30, 117, 254, 1);
      }
      .c_tag {
        background: rgba(255, 246, 230, 1);
        color: rgba(255, 153, 0, 1);
      }
    }
  }
}
</style>
